<!DOCTYPE html>
<html xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorate="~{layout}">

<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
    <meta name="_csrf" th:content="${_csrf.token}"/>
    <meta name="_csrf_header" th:content="${_csrf.headerName}"/>
    
    <title>Web AuthN Registration View</title>
    <link href="../../static/css/cas.css" rel="stylesheet" th:remove="tag"/>

    <script type="text/javascript" th:src="@{#{webjars.text-encoding.js}}"></script>
    <script type="text/javascript" th:src="@{#{webjars.text-encoding-indexes.js}}"></script>
    <script type="text/javascript" th:src="@{#{webjars.whatwg-fetch.js}}"></script>
    <script type="text/javascript" th:src="@{#{webjars.base64.js}}"></script>

    <script type="text/javascript" th:inline="javascript">
        /*<![CDATA[*/
        let appId = /*[[${webauthnApplicationId}]]*/;
        /*]]>*/
    </script>
    <script th:src="@{/js/webauthn/webauthn.js}"></script>
</head>

<body>
<main role="main" class="container mt-3 mb-3">
    <div layout:fragment="content" id="login">

        <div style="display: none" id="diagnostics">
            <p>
                <button class="btn btn-primary" type="button" data-toggle="collapse"
                        data-target="#serverResponse" aria-expanded="false" aria-controls="serverResponse">
                    Server Response
                </button>
                <button class="btn btn-primary" type="button" data-toggle="collapse"
                        data-target="#authenticatorResponse" aria-expanded="false" aria-controls="authenticatorResponse">
                    Authenticator Response
                </button>
                <button class="btn btn-primary" type="button" data-toggle="collapse"
                        data-target="#requestPanel" aria-expanded="false" aria-controls="requestPanel">
                    Request
                </button>
            </p>
            <div class="collapse" id="serverResponse">
                <div class="card card-body">
                    <h4>Server Response:</h4>
                    <pre id="session"></pre>
                    <pre id="server-response"></pre>
                </div>
            </div>
            <div class="collapse" id="authenticatorResponse">
                <div class="card card-body">
                    <h4>Authenticator Response:</h4>
                    <pre id="authenticator-response"></pre>
                </div>
            </div>
            <div class="collapse" id="requestPanel">
                <div class="card card-body">
                    <h4>WebAuthN Request:</h4>
                    <pre id="request"></pre>
                </div>
            </div>
        </div>

        <div class="d-flex justify-content-center flex-column align-items-center">
            <h2 id="status">Register Device</h2>
            <div id="messages">
                <p>Assign a friendly-name to your FIDO2-enabled device and then register it with CAS for multifactor
                    authentication. Once device registration is successfully completed, you will automatically
                    be redirected to the next step to login with your device.</p>
            </div>
            <div id="device-info">
                <div class="d-flex justify-content-center flex-column align-items-center">
                    <br>
                    <img id="device-icon"/>
                    <br>
                    <span id="device-name"></span>
                </div>
                <br>
                <p>Your FIDO2-enabled device is now registered with CAS. Please wait...</p>
            </div>
            <div>
                <section id="deviceNamePanel" class="cas-field form-group my-3 mdc-input-group">
                    <div class="mdc-input-group-field mdc-input-group-field-append">
                        <br>
                        <div class="d-flex">
                            <label for="credentialNickname" class="mdc-text-field mdc-text-field--outlined control-label mdc-text-field--with-trailing-icon">
                                <span class="mdc-notched-outline">
                                    <span class="mdc-notched-outline__leading"></span>
                                    <span class="mdc-notched-outline__notch">
                                        <span class="mdc-floating-label" th:utext="#{screen.authentication.webauthn.name}">Nickname</span>
                                    </span>
                                    <span class="mdc-notched-outline__trailing"></span>
                                </span>
                                <input class="mdc-text-field__input form-control"
                                       type="text"
                                       name="credentialNickname"
                                       id="credentialNickname"
                                       size="50"
                                       autocomplete="off" required />
                            </label>
                            
                        </div>
                    </div>
                </section>
                <button class="mdc-button mdc-button--raised btn btn-primary me-2"
                        name="registerButton" id="registerButton" accesskey="r" type="button">
                    <span class="mdc-button__label" th:text="#{screen.welcome.button.register}">Register Device</span>
                </button>

                <input type="hidden" id="registerCsrfToken" th:name="${_csrf.parameterName}" th:value="${_csrf.token}"/>

                <section id="residentKeysPanel" class="cas-field my-3 mdc-input-group">
                    <p>
                        You may also register your device using <i>Discoverable Credentials / Resident Keys</i>.
                        This means that the private key and associated metadata is stored in persistent
                        memory on the authenticator and not on the CAS server.
                    </p>
                </section>
                <button class="mdc-button mdc-button--raised me-2"
                        name="registerDiscoverableCredentialButton"
                        id="registerDiscoverableCredentialButton" accesskey="d" type="button">
                        <span class="mdc-button__label"
                              th:text="#{screen.welcome.button.register-residentkey}">Register Device with Discoverable Credentials</span>
                </button>

                <!--
                <button class="mdc-button mdc-button--raised btn btn-primary me-2"
                        id="logoutButton" disabled="disabled" name="logout"
                        accesskey="l" type="button" onclick="javascript:logout();">
                <span class="mdc-button__label"
                      th:text="#{screen.welcome.button.logout}">Logout</span>
                </button>
                <button class="mdc-button mdc-button--raised btn btn-primary me-2"
                        id="deregisterButton" name="deregister"
                        accesskey="d" type="button" onclick="javascript:deregister();">
                <span class="mdc-button__label"
                      th:text="#{screen.welcome.button.deregister}">Deregister</span>
                </button>
                -->
            </div>


        </div>

        <form method="POST" class="fm-v clearfix" id="form" th:action="@{/login}">
            <input type="hidden" name="_eventId" value="submit"/>
            <input type="hidden" id="sessionToken" name="sessionToken" />
            <input type="hidden" name="geolocation"/>
            <input type="hidden" name="execution" th:value="${flowExecutionKey}"/>
        </form>

        <script type="text/javascript">
            const csrfToken = $('#registerCsrfToken').val();

            document.getElementById("credentialNickname").value = randomWord();
            let btn = document.getElementById('registerButton');
            btn.addEventListener('click', event => {
                const username = '[[${principal.id}]]';
                const displayName = '[[${displayName}]]';
                const credentialNickname = $('#credentialNickname').val();
                register(username, displayName, credentialNickname, csrfToken);
            }, false);

            let btnResident = document.getElementById('registerDiscoverableCredentialButton');
            btnResident.addEventListener('click', event => {
                const username = '[[${principal.id}]]';
                const displayName = '[[${displayName}]]';
                const credentialNickname = $('#credentialNickname').val();
                register(username, displayName, credentialNickname, csrfToken, true);
            }, false);

        </script>

    </div>
</main>
</body>
</html>
